<template>
  <div class="card-inner-left">
    <h1 style="margin-bottom: 5px;font-size: 30px">欢迎注册</h1>
    <h3 style="margin-bottom: 10px;">Welcome to register</h3>
    <el-form ref="registerRuleFormRef"
             :model="registerForm"
             :rules="registerRules">
      <el-form-item :rules="emailRules" label="账号:" prop="email">
        <el-input v-model="registerForm.email" placeholder="Please enter email"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input v-model="registerForm.password" placeholder="Please enter password" show-password type="password"></el-input>
      </el-form-item>
      <el-form-item label="验证码:" prop="code">
        <el-input v-model="registerForm.code"  placeholder="Please enter code">
          <template #append>
            <el-button
                :disabled="isSending"
                size="mini"
                type="primary"
                @click="sendCode"
            >
              {{ isSending ? countdown + 's' : '获取验证码' }}
            </el-button>
          </template></el-input>
      </el-form-item>
    </el-form>
    <div class="button-login" @click="onSubmit">注册</div>
    <div class="message"><span>已经有账号，</span><span class="clickable-text" @click="$emit('switch-to-login')">去登录</span></div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import {registerApi,getVerificationCode} from '~/api/manager.js'
import { ElMessage } from 'element-plus'
const emits = defineEmits(["switch-to-login"]);
const registerForm = ref({
  email:'',
  password:'',
  userName:'',
  phone:'',
  code:''
});
const registerRuleFormRef = ref(null)
const registerRules = {
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 4, message: '密码至少需要4个字符', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '验证码', trigger: 'blur' },
    { min: 6, message: '验证码至少需要4个字符', trigger: ['blur', 'change'] },
  ],
};
const isSending = ref(false);
const countdown = ref(60); // 倒计时初始值
const emailRules = {
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
  ],
}


async function onSubmit() {
  try {
    // 验证表单
    await registerRuleFormRef.value.validate();

    // 调用登录 API
    const res = await registerApi(registerForm.value);
    // 跳转到登录
    if(res.code === '200') {
      emits('switch-to-login',registerForm.value.email)
    }

  } catch (error) {
    // 处理验证错误
    if (error.name === 'ValidateError') {
      console.error('验证失败', error);
      // 这里可以添加提示用户的逻辑
    } else {
      // 处理 API 调用错误
      console.error('登录失败', error);
      // 这里可以添加提示用户的逻辑
    }
  }
}

async function sendCode() {

  await registerRuleFormRef.value.validateField('email')
  if (isSending.value) return; // 防止重复发送
  // 设置为正在发送状态
  isSending.value = true;
  countdown.value = 60; // 重置倒计时

  // 启动倒计时
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      isSending.value = false; // 重置发送状态
    }
  }, 1000);
  try {
   const res = await getVerificationCode({
     email:registerForm.value.email
   });
    ElMessage({
      message:'验证码已发送，请查看您的邮箱',
      type:'success'
    })
  } catch (error) {
      console.error(error)
  }


}
</script>
<style scoped>

.card-inner-left{
  min-width: 320px;            /* 最小宽度 */
  min-height: 380px;           /* 最小高度 */
  background-color: white;     /* 背景颜色为白色 */
  border-radius: 8px;         /* 圆角半径为20px */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 边框阴影 */
  padding: 20px;               /* 内边距，视情况可调整 */
  margin: 0px;                /* 外边距，视情况可调整 */
}
.button-login{
  display: flex;                /* 使用 flexbox 布局 */
  justify-content: center;      /* 内容左右居中 */
  align-items: center;          /* 内容上下居中 */
  background-color: #518dec;       /* 背景颜色为蓝色 */
  color: white;                 /* 字体颜色为白色 */
  padding: 5px 0;               /* 上下内边距为5px，左右内边距为0 */
  border-radius: 8px;           /* 圆角半径为5px */
  cursor: pointer;
}
.message{
  padding: 2px;
  margin: 10px;
}
.clickable-text {
  color: blue; /* 字体颜色为蓝色 */
  cursor: pointer; /* 鼠标悬停时显示为可点击 */
  transition: color 0.3s; /* 添加过渡效果 */
}

.clickable-text:hover {
  color: darkblue; /* 鼠标悬停时字体颜色变为深蓝色 */
}
</style>